<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        /* transition:xx,xx,xx,xx; */
        }
    </style>
</head>
<body>
    
</body>
</html>
<script>
    //2021.2.23  


    //css3 新增了两种动画 
        //transition 和 animation 两种方式实现  
        //注意在这之前 一种是使用css的hover伪类属性方式 和 用js改变css属性方法 
        //(这里有个问题就是 元素的状态立即改变变化了 没有过渡的过程) css3新增的transition就可以解决这个问题 
    //

    //简写语法 
    /*transition:参1 参2 参3 参4 
                property            规定设置过渡效果的css属性的名称        名字     
                duration            规定完成过渡效果需要多少秒或者毫秒      执行时间 
                timing-function     规定速度效果的速度曲线                 效果  
                delay               定义过渡效果何时开始                   延时  
    */



    /*这是有个demo
        .div{
            width: 100px;
            height: 100px;
            background:red;
            //添加过渡 
            transiton: 1s;       //即transiton: all 1s; 
        }
        .div:hover{
            width: 200px;
            height: 200px;
            background: #000;    
        }
    ！没有设置参1 名字   就是说默认 所有发生变化的状态都会应用过渡 
    ！如果只需要某个特定属性发生过渡变化 写明就可以了 
        .div{
            width:100px;
            height:100px;
            background:red;
            //添加多个过渡
            transition:background 1s,width 2s height 3s; 
        }
        .div:hover{
            width:2000px;
            height:10;
            background:pink;
        }  
    */
/*
animation 更强大 
        //同样是上面的效果  
        .div{
            width:100px;
            height:100px;
            background:red;
        }
        .div:hover{
            animation:move 1s linear;
        }
        @keyframes move{
            100%{                     //这里可以用to{...}from{...} 20%{...}40%{..}
                width:100px;
                height:3000px;
                background:pink;
            }
        }
        //语法简写
        //animation:
            name             来调试@keyframes定义好的动画 跟@keyframes定义的动画名称一样 
            duration         指定元素播放动画 持续的时间 
            timing-function  规定速度效果的速度曲线 
            delay            在绘制dom树出来之前 整个animation执行之前等待的时间 (即延迟多少时间)
            iteration-count  定义动画播放次数 具体次数 或 无限循环(infinite)
            direction        设置动画播放的方向 
                                 [normal-按时间轴顺序] 
                                 [reverse-时间轴反方向运行] 
                                 [alterbate-轮流 即来回往复进行]
                                 [alternate-reverse-动画先反后正运行 并持续交替运行]
            play-state       控制元素动画的部分状态 通过这个来控制 动画的暂停和继续 两个值 running(继续) paused(暂停)
            fill-mode;       控制动画结束后 4个值 
                                 [none-回到动画没开始的状态]
                                 [forwards-动画结束后动画停留在 结束状态]
                                 [backwords-动画回到第一帧]
                                 [both-]
    */

     //animation 和 transition的不同？
           //keyframes提供了更多的控制 尤其是时间轴 使其更加强大 
           
     //css动画实现中常见的一些 易混淆概念
           //animation(动画)用于设置动画属性 有个简写的属性 包含6个属性 
           //transtion(过渡)用于设置元素的也是过渡 
           //transform(形变)用于元素进行旋转 缩放 移动 倾斜 
                /*none       定义不进行旋转
                 translate() scale() rotate()  skew()*/
                  
      

















</script>